<template>
    <div>
        <h3>组件shallowCom</h3>
        <div>user--name--{{ user.name }}</div>
        <button @click="change">修改属性</button>
        <button @click="change2">改变属性</button>
        <div>good--goodName--{{ good.goodName }}</div>
        <div>good--goooPrice--{{ good.goodPrice.price }}</div>
        <button @click="changeGoodName">修改商品名称</button>
        <button @click="changeGoodPrice">修改商品价格</button>
    </div>
</template>

<script setup>
import { shallowRef, shallowReactive } from 'vue';
const user = shallowRef({
    name: '长江二桥'
})
const change = () => {
    user.value.name = '熠熠生辉';  // 数据修改了，页面不修改
    console.log(user.value);
}
const change2 = () => {
    user.value = { name: '熠熠生辉' }  // 数据修改了，页面也修改
    console.log(user.value);
}
const good = shallowReactive({
    goodName: '开心',
    goodPrice: {
        price: 10000
    }
})
const changeGoodName = () => {
    good.goodName = '伤心'  // 数据修改了，页面也修改
    console.log(good);
}
const changeGoodPrice = () => {
    good.goodPrice.price = 1  // 数据修改了，页面不修改
    console.log(good);
}

</script>

<style lang="scss" scoped></style>